<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios</title>
</head>

<body>
  <div id="root">
    <ul>
      <li v-for="item in movies" :key="item.id">
        {{ item.showInfo }}
      </li>
    </ul>
  </div>

  <script src="./js/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.js"></script>
  <script>
    new Vue({
      el: '#root',
      data: {
        // 电影列表数据
        movies: []
      },
      mounted() {
        // 网络请求地址
        // 地址栏显示传参
        const url = 'http://127.0.0.1:8080/users'

        // fetch标标准post请求
        /* fetch(url, {
          method: 'POST',
          // post需要传入到服务器端的数据
          // fetch的post数据是 query字符串的形式
          body: 'uname=lisi&pwd=123',
          // 指明post的提交头信息
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(res => res.json()).then(data => console.log(data)) */

        // post提交json数据
        fetch(url, {
          method: 'POST',
          // json字符串
          body: JSON.stringify({
            uname: 'wangwu',
            pwd: '123'
          }),
          headers: { 'Content-Type': 'application/json' }
        }).then(res => res.json()).then(data => console.log(data))


      }
    })
  </script>
</body>

</html>